<template>
    <div class="login-box">
        <div class="login-box-left">
            <img src="@/assets/images/login/text.png" class="text" />
        </div>
        <div class="login-box-right">
            <div class="login-form">
                <img src="@/assets/images/login/login-logo.png" class="login-logo" />
                <div class="login-input">
                    <a-input placeholder="用户名" class="large-input" v-model="userName">
                        <template #prefix>
                            <img src="@/assets/images/login/icon-user.png" />
                        </template>
                    </a-input>
                </div>
                <div class="login-input">
                    <a-input placeholder="邮箱(需要激活认证)" class="large-input" v-model="email">
                        <template #prefix>
                            <img src="@/assets/images/login/icon-user.png" />
                        </template>
                    </a-input>
                </div>
                <div class="login-input">
                    <a-input placeholder="至少6位密码，区分大小写" class="large-input" v-model="password">
                        <template #prefix>
                            <img src="@/assets/images/login/icon-pwd.png" />
                        </template>
                    </a-input>
                </div>
                <div class="login-input">
                    <a-input placeholder="请确认密码" class="large-input" v-model="password">
                        <template #prefix>
                            <img src="@/assets/images/login/icon-pwd.png" />
                        </template>
                    </a-input>
                </div>
                <div class="login-input">
                    <a-input placeholder="邀请码" class="large-input" v-model="code"></a-input>
                </div>
                <div>
                    <a-button type="primary" block class="login-btn">注册</a-button>
                    <router-link to="/login">使用已有账号登录</router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import httpRequest from "@/util/httpRequest";
import {Input,Button} from "ant-design-vue";
export default {
    components:{
        AInput:Input,
        AButton:Button
    },
    data() {
        return {
            userName:'',
            email:'',
            password:'',
            confirmpwd:'',
            code:'',
            remember:true
        };
    },
    created(){

    },
    mounted() {
        this.groupId = this.$route.query.id;
        if(this.groupId){
            httpRequest.post("getGroupInfoByGroupId", { groupId: this.$route.query.id }).then((res) => {
                this.remark = res.data.remark;
            });
        }
    },
    methods: {

    },
};
</script>

<style lang="less" scoped>
.login-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    &-left{
        flex: 100;
        height: 100%;
        background: url("~@/assets/images/login/bg.png") center center no-repeat;
        background-size: 100% 100%;
        position: relative;
        .text{
            position: absolute;
            left: 60px;
            top: 80px;
        }
    }
    &-right{
        flex: 92;
        .login-logo{
            margin-bottom: 60px;
        }
        .login-form{
            width: 480px;
            display: block;
            margin:100px auto;
            .forget{
                float: right;
            }
            .remember{
                -webkit-user-select:none;
                -moz-user-select:none;
                -ms-user-select:none;
                user-select:none;
            }
            .login-input{
                margin-bottom: 30px;
                display: flex;
                .code-image{
                    width: 112px;
                    height: 48px;
                    margin-left: 10px;
                }
            }
        }
        .large-input{
            padding: 12px 11px;
            border-radius:5px;
        }
        .login-btn{
            height: 48px;
            line-height: 48px;
            padding:0;
            border-radius: 10px;
            margin-top: 85px;
            margin-bottom: 15px;
            font-size: 20px;
        }
    }
}
</style>
